<!-- 页面说明 -->
<template>
  <main class="page-main">
    <!-- 页面内容 -->
    <header class="my-header">
      <a-row>
        <a-col :span="16" :offset="4">
          <a-row>
            <a-col :span="8">
              <img :height="60" src="/logo2.png" />
            </a-col>
            <a-col :span="16">
              <div class="menu-container">
                <span :class="item.selected?'my-menu-selected':'my-menu'"
                      @click="handleMenuClick(item)" v-for="item in menus">
                  {{item.label}}
                </span>
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </header>

    <div id="banner">
      <a-carousel effect="fade" autoplay >
        <img class="cursor-pointer width" src="/banner1.jpg" />
        <img class="cursor-pointer width" src="/banner2.jpg" />
        <img class="cursor-pointer width" src="/banner3.jpg" />
      </a-carousel>
    </div>


      <div class="my-content" id="technologyStack">
        <a-row>
          <a-col :span="16" :offset="4">
            <div class="font-size-20 bolder margin-bottom-10">
              技术栈
            </div>
            <a-row :gutter="16">
              <a-col v-for="item in contentList.technologyStack" :span="8" class="margin-bottom-20">
                <Card3D>
                <a-card hoverable class="animation-rotate-in">
                  <template #cover>
                    <img :src="item.img"  />
                  </template>
                  <a-card-meta :title="item.title">
                    <template #description>
                      <div class="margin-left-20" v-for="str in item.items">☆ {{str}}</div>
                    </template>
                  </a-card-meta>
                </a-card>
                </Card3D>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>



    <div class="my-content" id="advantage">
      <a-row>
        <a-col :span="16" :offset="4">
          <div class="font-size-20 bolder margin-bottom-20">
            产品优势
          </div>
          <a-row :gutter="16">
            <a-col v-for="item in contentList.advantage" :span="8" class="margin-bottom-20">
              <Card3D>
                <a-card hoverable  class="animation-jump-in-right">
                  <template #cover>
                    <img :src="item.img"  />
                  </template>
                  <a-card-meta :title="item.title">
                    <template #description>
                      <div class="margin-left-20" v-for="str in item.items">☆ {{str}}</div>
                    </template>
                  </a-card-meta>
                </a-card>
              </Card3D>

            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>

    <div class="my-content" id="productFunction">
      <a-row>
        <a-col :span="16" :offset="4">
          <div class="font-size-20 bolder margin-bottom-20">
            功能特性
          </div>
          <a-row :gutter="16">
            <a-col v-for="(item,index) in contentList.productFunction" :span="12" class="margin-bottom-20">
              <Card3D>
                <a-card
                    hoverable
                    :class="index % 4 < 2 ? 'animation-jump-in-left' : 'animation-jump-in-right'"                >
                  <template #cover>
                    <img :src="item.img"  />
                  </template>
                  <a-card-meta :title="item.title">
                    <template #description>
                      <div class="margin-left-20" v-for="str in item.items">☆ {{str}}</div>
                    </template>
                  </a-card-meta>
                </a-card>
              </Card3D>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>

    <footer class="my-footer">
      <div>Copyright © 2023-2025 coder4j.com All Rights Reserved Keller</div>
      <div>京ICP备2023023545号</div>
    </footer>
  </main>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

import { MenuProps } from 'ant-design-vue';
const current = ref<string[]>(['mail']);
const menus = ref<MenuProps['items']>([
  {key: 'mail', label: '首页 ',selected:true,id:"banner"},
  {key: 'prodct', label: '项目介绍',selected:false,id:"productFunction"},
  {key: 'sub1', label: '在线文档',selected:false,url:"/homeDocument",
    children: [
      {label: '前端文档', key: 'setting:1'},
      {label: '后端文档', key: 'setting:2'},
    ],
  },
  {key: 'alipay',label:"在线演示",selected:false,url:"/login"},
]);

const handleMenuClick = (item)=>{
  let array = menus.value;
  for (let menu of array) {
    if(menu.key === item.key){
      menu.selected = true;
    }else {
      menu.selected = false;
    }
  }
  menus.value = array;
  //包含ID,页面锚点跳转
  if(item.id){
    // window.location.hash = '#'+item.id;
    const element = document.getElementById(item.id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
  //包含Url，页面间跳转
  if(item.url){
    router.push(item.url);
  }
}

const contentList=ref({
  //技术栈
  technologyStack:[
    {
      title:"前端",
      img:"banner1.jpg",
      items:["Vue3【3.2.47】, TypeScript","antdv【4.2.1】, vite【4.5.0】"]},
    {
      title:"后端",
      img:"banner2.jpg",
      items:["Java","SpringBoot"]},
    {
      title:"其他",
      img:"banner3.jpg",
      items:["MySQL","Redis"]}
  ],
  advantage:[
    {
      title:"轻量化，依赖少，拒绝臃肿",
      img:"https://picsum.photos/840/360",
      items:[
        "SpringBoot、AOP【Spring基础依赖】",
        "mysql-connector-j【MySQL驱动】",
        "easyExcel、beetl【模版引擎】",
        "lombok"]},
    {
      title:"脚手架功能齐全",
      img:"https://picsum.photos/840/360",
      items:[
        "通用Mapper、Service、Controller",
        "基础增删改查、分页查询、导出Excel",
        "内置批量添加、批量修改、生成树",
        "操作日志、异常处理、运行监控"
      ]},
    {
      title:"代码生成器",
      img:"https://picsum.photos/840/360",
      items:["前后端代码一键生成、打包下载","代码一键创建到项目中","菜单、按钮一键生成","模版文件自由修改，高度灵活"]}
  ],
  //功能特性
  productFunction:[
    {
      title:"完善的权限管理",
      img:"https://picsum.photos/840/180",
      items:[
        "功能权限：按角色控制菜单权限、按钮权限",
        "数据权限：按角色、组织控制权限范围",
        "API权限：每个API和功能权限绑定，防止恶意攻击"]},
    {
      title:"【0代码】实现后端基础功能",
      img:"https://picsum.photos/840/180",
      items:[
        "通用Mapper，【0代码】实现基础增删改查操作",
        "通用Service，【0代码】实现批量添加、批量修改、生成树形结构",
        "通用Controller，【0代码】实现增删改查、数据导出接口"]},
    {
      title:"完善的Java开发工具包",
      img:"https://picsum.photos/840/180",
      items:[
        "自带AES、Base64、MD5、UUID、ZIP、SqlLite工具类",
        "自带日期处理、字符串处理、随机数处理、文件读写、包扫描工具类",
        "自带JWT验证、API权限校验、全局用户身份识别"]},
    {
      title:"完整的日志记录",
      img:"https://picsum.photos/840/180",
      items:[
        "全局异常处理，并自动记录系统错误日志，及时预警，运维利器",
        "一行注解，自动记录用户操作日志，问题追溯，快速定责",
        "简单配置，实现第三方业务日志，划清边界，拒绝扯皮"
      ]},
    {
      title:"灵活的字典管理",
      img:"https://picsum.photos/840/180",
      items:[
        "支持自定义字典类型",
        "支持层级结构",
        "支持自定义内容扩展"
      ]},
    {
      title:"强大的内容管理",
      img:"https://picsum.photos/840/180",
      items:[
        "笔记、博客、文章，自由定义内容类型，支持打标签",
        "草稿、已发布、回收站，多种状态随心控制，支持定时发布",
        "MarkDown格式，支持表格、代码块、流程图、时序图、类图……"
      ]}
  ],
})




// 数据定义
const data = ref('');

// 方法定义
function exampleMethod() {
  // 方法逻辑
}

import {doAnimation} from "@/ts/Animation";
import Card3D from "@/components/special/Card3D.vue";

// 挂载时的逻辑
onMounted(() => {
  // 执行挂载时的逻辑
  doAnimation();
});
</script>

<style scoped>
/* 样式定义 */
.my-header{
  background-color:  rgba(0, 21, 41, 0.5);
  color: white;
  height: 60px;
  line-height: 60px;
  position: fixed; /* 固定定位 */
  width: 100%;     /* 宽度撑满屏幕 */
  top: 0;           /* 距离顶部为0 */
  z-index: 1000;    /* 确保层级足够高，不被其他元素遮挡 */
}

.my-menu{
  cursor: pointer;
  color:  rgba(255,255,255, 0.65);
  font-size: 18px;
  line-height: 60px;
  padding: 0 20px;
}
.my-menu:hover{
  background-color: #1677aa;
  color:  rgba(255,255,255, 0.80);
}
.my-menu-selected{
  cursor: pointer;
  font-size: 18px;
  line-height: 60px;
  padding: 0 20px;
  background-color: #1677FF;
  color: white;
}

.menu-container {
  display: flex;
  height: 60px;
  line-height: 60px;
  justify-content: flex-end; /* 水平居右 */
  align-items: center; /* 可选：垂直居中 */
}


.my-content{
  background-color: #f0f3ff;
  padding: 10px 0;
}

.my-footer{
  padding-top: 20px;
  text-align: center;
  height: 60px;
  line-height: 20px;
  font-size: 12px;
  background-color:  rgba(0, 21, 41, 0.95);
  color:  rgba(255,255,255, 0.65);

}
</style>
